<%-- 
    Document   : digitalclassroom
    Created on : 29-okt-2012, 18:32:51
    Author     : kjeld
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="style/general.css" type="text/css" rel="Stylesheet">
        <link rel="stylesheet" href="style/digitalclassroom.css" />
        <!-- include jQuery Library From Google Code -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

        <!-- include jQuery UI  From Google Code-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

        <script type="text/javascript" src="http://www.google.com/jsapi"></script>

        <script type="text/javascript">
            google.load("jquery", "1.3.1");
            google.setOnLoadCallback(function()
            {
                // Just for demonstration purposes, change the contents/active state using jQuery
                $("#blackboardmenu ul li a").click(function(e) {
                    e.preventDefault();
		
                    $("#blackboardmenu ul li a").each(function() {
                        $(this).removeClass("active");	
                    });
		
                    $(this).addClass("active");
		
                    $("h3").html($(this).attr("title"));
		
                    var iFrame = document.getElementById('blackboardframe');
                    if($(this).attr("title") == "PDF"){
                        //iFrame.src = "http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Workbook.pdf&embedded=true";
                        iFrame.src = "http://docs.google.com/gview?url=${path}${pdfFile.name}&embedded=true";
                    }
                    else if($(this).attr("title") == "Slides"){
                        //iFrame.src = "http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Three2Learn.ppt&embedded=true";
                        iFrame.src = "http://docs.google.com/gview?url=${path}${pptFile.name}&embedded=true";
                    }
                    else {
                        iFrame.src = "";
                    }
                });
            });
        </script>

        <script type="text/javascript">
            $(document).ready(function(){
                $("#menu a").hover(function() {
                    $(this).stop().animate({ backgroundColor: "#4e88b2"}, 800);
                },function() {
                    $(this).stop().animate({ backgroundColor: "#504e4e" }, 800);
                });
				
            }); 
        </script>

        <jsp:useBean id="inhoud" scope="application" class="models.Bean" />   
        <jsp:setProperty name="inhoud" property="language" value="<%= models.Bean.getLanguage()%>" />

        <title>
            Three 2 Learn
        </title>
    </head>
    <body>
        <div id="header">
            <div id="topmenu">
                <div id="topmenu">
                    <ul class="login">
                        <li><img src="style/logo32L.png"/></li>
                        <li><a href="/language?lang=nl" title="Nederlands"><img src="images/flags/nl.png"></a></li>
                        <li><a href="/language?lang=en" title="English"><img src="images/flags/uk.png"></a></li>
                                <c:choose>
                                    <c:when test="${loggedin eq 'true'}">
                                <li><a href="/logout" id="toggleLogout" >
                                        <jsp:setProperty name="inhoud" property="key" value="LogOut" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                    </a></li>
                                <li><a href="/${omgeving}" >
                                        <jsp:setProperty name="inhoud" property="key" value="BackTo" />
                                        <jsp:getProperty name="inhoud" property="key" /> ${omgeving}
                                        <jsp:setProperty name="inhoud" property="key" value="TheEnvironment" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                    </a></li>
                                <li><h2><jsp:setProperty name="inhoud" property="key" value="Welcome" />
                                        <jsp:getProperty name="inhoud" property="key" />, ${user.firstName} ${user.lastName}</h2></li>
                                    </c:when>
                                    <c:otherwise>
                                <li><a href="#" id="toggleLogin" >
                                        <jsp:setProperty name="inhoud" property="key" value="Login" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                    </a></li>
                                </c:otherwise>
                            </c:choose>

                    </ul>
                </div>

            </div>

            <div class="middle">
                <div id="menu">
                    <ul>
                        <li><a href="/index">
                                <jsp:setProperty name="inhoud" property="key" value="Homepage" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </a></li>
                        <li><a href="courses.jsp">
                                <jsp:setProperty name="inhoud" property="key" value="Courses" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </a></li>

                        <li><a href="three2Learn.jsp">Three2Learn</a></li>
                        <li><a href="information.jsp">

                                <jsp:setProperty name="inhoud" property="key" value="Information" />

                                <jsp:getProperty name="inhoud" property="key" />
                            </a></li>
                        <li><a href="faq.jsp">

                                <jsp:setProperty name="inhoud" property="key" value="FAQ" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </a></li>

                        <li><a href="contact.jsp" class="lastItem">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--<div id="blackboard">
        <!--<iframe id="blackboardframe" src="http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Workbook.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe>-->
        <!--<div id="blackboardmenu">
                <ul>
                        <li><a href="#" title="Slides" class="active">
                            </a></li>
                        <li><a href="#" title="PDF">PDF</a></li>
                        <li><a href="#" title="Blackboard">Blackboard</a></li>
                </ul>
        </div>-->
        <!--<div id="main">
                <h3>
                    
                </h3>
                <p></p>
            <iframe id="blackboardFrame" src="http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Three2Learn.ppt&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe>
        </div>

        </div>-->

        <div align="center" id="container" >
            <c:choose>
                <c:when test="${not empty courseID}">
                    <div id="blackboard" style="margin-left: 150px">
                        <!--<iframe id="blackboardframe" src="http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Workbook.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe>-->
                        <div id="blackboardmenu">
                            <ul>
                                <li><a href="#" title="Slides" class="active">Slides</a></li>
                                <li><a href="#" title="PDF">PDF</a></li>
                                <li><a href="#" title="Blackboard">Blackboard</a></li>
                            </ul>
                        </div>
                        <div id="main">
                            <h3>Slides</h3>
                            <p></p>
                            <!--<iframe id="blackboardframe" src="http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Three2Learn.ppt&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe>-->
                            <iframe id="blackboardFrame" src="http://docs.google.com/viewer?url=${path}${pptFile.name}&embedded=true" width="100%" height="100%" style="border: none;"></iframe>
                        </div>
                    </div>

                        <div id="livestream" style="margin-top: 76px">
                        <<iframe src="http://cdn.livestream.com/embed/${livestreamname}?layout=3&autoPlay=true&width=668&height=207" width="100%" height="100%" style="border:0;outline:0" frameborder=0 scrolling=no></iframe>
                    </div>


                </c:when>
                <c:otherwise>
                    <div>
                        <ul>
                            <c:forEach var="course" items="${courses}">
                                <li><a href="digitalclassroom?courseID=${course.courseID}">${course.name}</a></li>
                            </c:forEach>
                        </ul>
                    </div>
                </c:otherwise>
            </c:choose>   
        </div>
    </body>
</html>
